<template>
  <div class="login-father">
    <ul class="header-right">
      <li>
        <nuxt-link to="/">返回首页</nuxt-link>
      </li>
      <li>|</li>
      <li>
        <p>客服热线：</p>
        <p class="phone-number">025-85238897</p>
      </li>
    </ul>
    <div class="from-login">
      <div class="from-content">
        <div class="from-logo">
          <img src="~static/images/login/login-logo.png" alt />
          <nuxt-link to="/base/register" class="to-login">我要注册</nuxt-link>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- tabs密码登录 -->
          <el-tab-pane label="密码登录" name="first">
            <div class="slogan" v-show="isExistence">
              <div class="noReg" v-show="isError">
                <img src="~static/images/login/error.png" />
                账号未注册，你可以
                <span>去注册</span>
              </div>
              <div class="noReg" v-show="!isError">
                <img src="~static/images/login/error.png" />
                账号或密码错误，请
                <span>重新输入</span>
              </div>
            </div>
            <el-form
              :model="ruleForm"
              status-icon
              label-width="100px"
              :show-message="false"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item prop="checkNumber" style="margin-top:0">
                <el-input
                  type="text"
                  prefix-icon="iconfont iconshouji-copy"
                  placeholder="手机号码"
                  v-model="ruleForm.checkNumber"
                  :show-message="false"
                  autocomplete="off"
                  @focus="isChangeBack=true"
                  @blur="isChangeBack=false"
                  :class="[!isExistence?'showMargin':'',isChangeBack?'isChangBack':'']"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-input
                  type="password"
                  prefix-icon="iconfont iconmima-copy"
                  placeholder="输入密码"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                  :class="[isChangeBack1?'isChangBack':'']"
                  @focus="isChangeBack1=true"
                  @blur="isChangeBack1=false"
                  @keyup.enter.native="submitForm"
                  onpaste="return false"
                ></el-input>
              </el-form-item>
              <div class="next-login">
                <!-- FIXEDBY: 顾章华 修改BUG: http://10.159.62.216:9090/zentao/bug-view-74.html -->
                <!-- <el-checkbox v-model="ruleForm.saveInfo">下次自动登录</el-checkbox> -->
                <router-link to="/forgetPassword">忘记密码？</router-link>
              </div>
              <el-form-item>
                <el-button
                  type="primary"
                  :class="ruleForm.checkNumber != '' && ruleForm.pass != '' ?  '':'errButton' "
                  :disabled=" ruleForm.checkNumber != '' && ruleForm.pass != '' ? false : true "
                  @click="submitForm"
                >登 录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- tabs短信验证码登陆 -->
          <el-tab-pane label="验证码登录" name="second">
            <div class="slogan" v-show="isExistence">
              <div class="noReg">
                <img src="~static/images/login/error.png" />
                {{vertifyCodeErrorMsg || '验证码不正确'}}
              </div>
            </div>
            <el-form
              :model="ruleForm1"
              status-icon
              ref="ruleForm1"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item prop="checkNumber1" style="margin-top:0">
                <el-input
                  type="text"
                  prefix-icon="iconfont iconshouji-copy"
                  placeholder="手机号码"
                  v-model="ruleForm1.checkNumber1"
                  autocomplete="off"
                  @focus="isChangeBack=true"
                  @blur="isChangeBack=false"
                  :class="[!isExistence?'showMargin':'',isChangeBack?'isChangBack':'']"
                ></el-input>
              </el-form-item>
              <!-- 验证码 -->
              <div class="phone-code">
                <el-form-item prop="verCode">
                  <el-input
                    type="text"
                    prefix-icon="iconfont iconicon_anquan-copy"
                    placeholder="验证码"
                    :class="[isChangeBack1?'isChangBack':'']"
                    @focus="isChangeBack1=true"
                    @blur="isChangeBack1=false"
                    @keyup.enter.native="submitFormPhone"
                    v-model="ruleForm1.verCode"
                    autocomplete="off"
                  ></el-input>
                  <el-button
                    type="info"
                    v-show="verCodeShow"
                    :class="ruleForm1.checkNumber1 !== '' && (/^1(3|4|5|6|7|8|9)\d{9}$/.test(ruleForm1.checkNumber1)) ?  '':'errButton' "
                    :disabled=" ruleForm1.checkNumber1 !== '' && (/^1(3|4|5|6|7|8|9)\d{9}$/.test(ruleForm1.checkNumber1))? false : true "
                    @click="submitCode(ruleForm1.checkNumber1)"
                  >获取验证码</el-button>
                  <div class="ver-show" v-show="!verCodeShow">{{content}}S后重新发送</div>
                </el-form-item>
              </div>
              <el-form-item>
                <el-button
                  type="primary"
                  :class="ruleForm1.checkNumber1 !== '' && ruleForm1.verCode !== '' ?  '':'errButton' "
                  :disabled=" ruleForm1.checkNumber1 !== '' && ruleForm1.verCode !== '' ? false : true "
                  @click="submitFormPhone()"
                >登 录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <!-- 第三方登录 -->
        <!-- <div class="other-login">
          <p>第三方账号登录</p>
          <div>
            <span class="iconfont iconweixin-copy-copy wx-icon">
            <span class="iconfont iconqq qq-icon"></span>
          </div>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPhoneCodeHasUser,
  pcLoginByPhoneCode,
  pcLogin,
  getAuth
} from "api/user/login1.js";
import { Encrypt } from "@/utils/secret.js";
import { setCookies, getCookies, remove } from "@/utils/cookies.js";
export default {
  layout: "black-layout",
  middleware: "sidauth",
  data() {
    return {
      ruleForm: {
        pass: "",
        checkNumber: "",
        saveInfo: true
      },
      ruleForm1: {
        verCode: "",
        checkNumber1: ""
      },

      activeName: "first",
      //loginContent: '账号未注册，你可以去',
      getCode: "",
      logining: false,
      loginTips: null,
      sid: "",
      content: 0,
      verCodeShow: true,
      isExistence: false,
      isError: true,
      isErrButton: false,
      // vertifyCode 验证码登录错误提示信息
      vertifyCodeErrorMsg: "",
      isChangeBack: false,
      isChangeBack1: false
    };
  },
  methods: {
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    // 账号密码登录按钮
    submitForm() {
      this.loginTips = this.$loading({
        lock: true,
        text: "登录中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.postSubmit();
    },

    // 发送登陆请求
    postSubmit() {
      if (this.ruleForm.saveInfo) {
        this.saveUserInfo();
      }
      // else {
      //   this.clearSaveInfo();
      // }
      const params = {
        userName: this.ruleForm.checkNumber,
        userPasswd: Encrypt(this.ruleForm.pass)
      };
      pcLogin(params)
        .then(({ respCode, respMsg, result }) => {
          //console.log({ respCode, respMsg, result });
          // 账号未注册提示
          remove("sid");

          if (respCode == "2") {
            this.loginTips.close();
            this.logining = false;
            this.isExistence = true;
            this.isError = false;
            return;
          }
          // 用户账号或者密码错误
          if (respCode == "1") {
            this.loginTips.close();
            this.logining = false;
            this.isExistence = true;
            this.isError = true;
            return;
          }
          // 处理其他的错误提示信息 fixed: 顾章华
          if (respCode !== "0") {
            this.$message({
              type: "error",
              message: `${respMsg}`
            });
            return;
          }
          this.loginTips.close();
          this.logining = false;
          this.sid = result.split("=");
          //console.log(this.sid[1])
          setCookies("sid", this.sid[1]);
          this.$router.push({
            path: "/home"
          });
        })
        .catch(err => {
          this.loginTips.close();
          this.logining = false;
        });
    },

    // 手机验证码登录按钮
    submitFormPhone() {
      const params = {
        phoneCode: this.ruleForm1.verCode,
        userNameOrPhone: this.ruleForm1.checkNumber1
      };
      // 短信登陆接口调用
      pcLoginByPhoneCode(params)
        .then(({ respCode, respMsg, result }) => {
          // 错误处理
          if (respCode == "0") {
            setCookies("sid", result);
            this.$router.push({
              path: "/home"
            });
          } else if (respCode !== "0") {
            remove("sid");
            this.isExistence = true;
            this.vertifyCodeErrorMsg = respMsg;
            return;
          }
        })
        .catch(err => {
          this.isExistence = true;
        });
    },

    // 获取验证码
    submitCode(code) {
      //console.log(code);
      getPhoneCodeHasUser({
        phone: code
      })
        .then(({ respCode, respMsg, result }) => {
          //console.log({ respCode, respMsg, result });
          if (respCode !== "0") {
            this.$message({
              message: `获取验证码失败，原因是:${respMsg}`,
              type: "error"
            });
            return;
          }
          //this.getCode = result;
          this.verCodeShow = false; // 控制显示隐藏
          this.content = 60;
          let timeInt = setInterval(() => {
            this.content--;
            if (this.content <= 0) {
              this.verCodeShow = true;
              window.clearInterval(timeInt);
            }
          }, 1000);
        })
        .catch(err => {
          this.$message({
            message: `获取验证码失败`,
            type: "error"
          });
        });
    },

    /* 
              保存用户信息
          */
    saveUserInfo() {
      // setCookies('login__username' , this.ruleForm.userN
      setCookies("login__username", this.ruleForm.checkNumber);
      setCookies("login__pass", this.ruleForm.pass);
    },
    clearSaveInfo() {
      setCookies("login__username", "");
      setCookies("login__pass", "");
    },
    getUserInfo() {
      // this.ruleForm.checkNumber = getCookies('login__username');
      // this.ruleForm.pass = getCookies('login__pass');
      if (getCookies("login__username") && getCookies("login__pass")) {
        this.ruleForm.checkNumber = getCookies("login__username");
        this.ruleForm.pass = getCookies("login__pass");
      }
    }
  },
  mounted() {},
  created() {
    this.getUserInfo();
  }
};
</script>

<style lang="scss">
.login-father {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("~static/images/login/bg.png") center center / 100% 100%
    no-repeat;
  .header-right {
    float: right;
    margin-top: 40px;
    margin-right: 50px;
    width: 350px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #fff;
    a {
      color: #fff;
      font-size: 16px;
    }
    li {
      margin: 0;
    }
    p {
      margin: 0;
      float: left;
      color: #fff;
      font-size: 16px;
    }
    .phone-number {
      font-size: 24px;
    }
  }
  .from-login {
    //height:518px;
    width: 422px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 4px;
    margin-left: -211px;
    margin-top: -259px;
    background: #fff;
    .from-content {
      width: 334px;
      //height:475px;
      padding-top: 43px;
      margin: 0 auto;
      .from-logo {
        width: 334px;
        height: 31px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .to-login {
          color: #666 !important;
          font-size: 14px;
        }
      }
      // 账号登陆跟短信登陆tabs
      .el-tabs__header {
        margin-bottom: 0;
      }
      .el-tabs {
        width: 334px;
        height: 320px;
        margin-top: 26px;
        .el-tabs__item {
          width: 167px;
          text-align: center;
          line-height: 40px;
          padding: 0;
          color: #999;
          font-size: 18px;
          &:hover {
            color: #333;
          }
        }
        .is-active {
          color: #333 !important;
        }
        .el-tabs__active-bar {
          background-color: #b9b9b9;
        }

        // 账号登陆
        .slogan {
          margin-top: 12px;
          margin-bottom: 12px;
        }
        .noReg {
          width: 334px;
          height: 42px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          background: #ffe6e5;
          line-height: 42px;
          color: #000;
          font-size: 14px;
          border: 1px solid #cc5329;
          border-radius: 3px;
          img {
            margin: 0 10px 0 20px;
          }
          span {
            color: #cc5329;
          }
        }

        .showMargin {
          margin-top: 45px;
        }
        .el-form-item {
          margin-top: 14px;
          margin-bottom: 0;

          .el-input__prefix {
            left: 20px;
          }
        }
        .el-form-item__content {
          margin-left: 0 !important;

          // .el-input__prefix{
          //   top:3px;
          // }
          .el-input__inner {
            width: 334px;
            height: 40px;
            font-size: 14px;
            padding-left: 45px;
            border-radius: 0;
            color: #898280;
            border: 1px solid #ddd8d4;
            background: #fafafa;
            border-radius: 3px;
          }

          .el-button--primary {
            width: 334px;
            height: 40px;
            border-radius: 20px;
            background: linear-gradient(to right, #fc4506, #f57c4b);
            font-size: 16px;
            outline: none;
            border: 0;
          }

          .errButton {
            background: #eee;
            color: #b3b3b3;
            border: 0;
          }

          .el-input__validateIcon {
            color: #999;
          }
        }
        .next-login {
          margin-top: 12px;
          width: 334px;
          display: flex;
          color: #808080;
          justify-content: space-between;
          align-items: center;
          a {
            color: #808080;
          }
          .el-checkbox__label {
            padding-left: 4px;
            color: #808080;
            &::after {
              background: #fc4506;
            }
          }
          .el-checkbox__inner {
            border: 1px solid #c7cad1;
          }
          // 下次登录选中
          .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: #fc4506;
            border-color: #fc4506;
          }
        }
      }

      // tabs短信登陆
      .showMargin {
        margin-top: 45px;
      }
      .errButton {
        background: #eee;
        color: #bbbbbb;
        border: 0;
      }
      .phone-code {
        .el-input__inner {
          width: 204px !important;
        }
        .el-input {
          float: left;
          width: 204px;
        }
        .el-button--info {
          width: 120px;
          height: 40px;
          float: right;
          font-size: 16px;
          color: #fff;
          border: 0;
          margin-top: 0;
          background: #fc4506;
        }
        .ver-show {
          width: 120px;
          height: 40px;
          float: right;
          font-size: 16px;
          text-align: center;
          color: #bbbbbb;
          margin-top: 0;
          background: #eee;
          border-radius: 3px;
        }
      }
    }
    // 账号第三方登陆
    .other-login {
      width: 334px;
      margin-bottom: 32px;
      p {
        text-align: center;
        margin: 0 0 18px 0;
        font-size: 14px;
        color: #999999;
      }
      div {
        width: 114px;
        height: 42px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .wx-icon {
          font-size: 39px;
          color: #ddd;
          &:hover {
            color: #00bb00;
          }
        }
        .qq-icon {
          font-size: 39px;
          color: #ddd;
          &:hover {
            color: #19a9f1;
          }
        }
      }
    }
  }

  .isChangBack {
    .el-input__inner {
      background: #ffff !important;
    }
  }
}
</style>